<template>
  <div id="main">
    <ul class="nav">
      <li v-for="(item,index) in navs" :key="'route_'+index" @click="toPath(item)">{{item.name}}</li>
    </ul>
    <router-view />
    <div id="vue"></div>
  </div>
</template>

<script>
import { start } from 'qiankun'
export default {
  data() {
    return {
      navs: [
        { name: 'Home', path: 'home' },
        { name: 'Vue2项目', path: 'qkvue2' },
        { name: 'Vue3项目', path: 'qkvue3' },
        { name: 'React17项目', path: 'react17' },
        { name: 'Angular项目', path: 'angular9' },
        { name: 'Html项目1', path: 'jcpgyj' },
        // { name: 'Html项目2', path: 'zygjczlyj' },
      ],
      appInstance: null,
    }
  },
  mounted() {
    if (!window.qiankunStarted) {
      window.qiankunStarted = true
      start()
    }
  },
  methods: {
    toPath(item) {
      if (this.$route.path.substring(1) === item.path) return false
      this.$router.push('/' + item.path)
    },
  },
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
html,
body,
#main {
  width: 100%;
  height: 100%;
}
.nav {
  list-style: none;
  background: #dedede;
  display: flex;
}
.nav li {
  width: 120px;
  height: 66px;
  line-height: 66px;
  text-align: center;
  cursor: pointer;
}
#vue {
  height: calc(100% - 66px);
}
</style>